<template>
    <div class="maxbox">
        <div class="content">

            <div class="forms">
                <h2>发表新攻略</h2>
                <p>分享你的个人游记，让更多人看到哦！</p>
                <el-form>
                    <el-form-item>
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <client-only>
                            <VueEditor
                                v-model="form.content"
                                ref="vueEditor"
                                :config="config"
                                style="height:450px;margin-bottom:80px"
                            />
                        </client-only>
                    </el-form-item>
                    <div class="select">
                        <!-- <el-form-item label="选择城市:">
                        <el-input placeholder="请搜索游玩城市"></el-input>
                    </el-form-item> -->
                        <el-form-item label="到达城市:">
                            <el-autocomplete
                                :highlight-first-item="true"
                                :trigger-on-focus="false"
                                v-model="form.city"
                                :fetch-suggestions="queryDestSearch"
                                placeholder="请搜索到达城市"
                                class="el-autocomplete"
                            ></el-autocomplete>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="onSubmit"
                        >发布</el-button>
                        或者
                        <a
                            href="javascript:;"
                            @click="addDraft"
                        >存为草稿</a>
                    </el-form-item>
                </el-form>

            </div>

            <div class="aside ">
                <div class="draft-box">
                    <h4 class="draft-title">
                        草稿箱({{ this.$store.state.history.postList.length }})
                    </h4>
                    <div class="draft-list">
                        <div
                            v-for="(item,index) in draftList"
                            :key="index"
                            class="draft-item"
                        >
                            <div class="draft-post-title">
                                {{ item.title }}<span class="iconfont el-icon-edit" />
                            </div>
                            <div class="chers">
                                <p>{{ item.time}} </p>
                                <i
                                    class="el-icon-edit "
                                    @click="getDraft(index)"
                                >
                                </i><i
                                    class="el-icon-delete"
                                    @click="delDraft(index)"
                                >
                                    <el-button type="text"></el-button>
                                </i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import moment from "moment";
export default {
    data() {
        return {
            msgBox: null,
            postList: [],
            form: {
                title: "",
                content: "",
                city: "",
            },
            // draftList: [],
            id: "",
            config: {
                modules: {
                    // 工具栏
                    toolbar: [
                        ["bold", "italic", "underline", "strike"],
                        [{ header: 1 }, { header: 2 }],
                        ["image"],
                    ],
                },
                // 主题
                theme: "snow",
                // 上传图片的配置
                uploadImage: {
                    // showProgress: false,
                    url: `${this.$axios.defaults.baseURL}/upload`,
                    name: "files",
                    hearders: {
                        Authorization:
                            "Bearer " + this.$store.state.user.userInfo.token,
                    },
                    // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
                    uploadSuccess: (res, insert) => {
                        console.log(res);
                        const file = res.data[0];
                        insert(this.$axios.defaults.baseURL + file.url);
                    },
                },
            },
        };
    },
    computed: {
        draftList() {
            return this.$store.state.history.postList;
        },
    },
    watch: {
        draftList() {
            return this.$store.state.history.postList;
        },
    },
    methods: {
        //删除草稿
        delDraft(index) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$store.commit("history/delDraft", index);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 获取草稿
        getDraft(index) {
            this.id = index;
            console.log("this.id=" + this.id);
            this.form = { ...this.$store.state.history.postList[index] };
        },
        // 保存草稿
        addDraft() {
            if (this.form.title === "" || this.form.city === "") {
                if (this.msgBox) {
                    this.msgBox.close();
                }
                this.msgBox = this.$message({
                    type: "warning",
                    message: "空内容无法保存",
                });
                return;
            }
            this.$store.commit("history/addDraftList", {
                form: this.form,
                id: this.id,
            });
            // 清空输入框
            (this.form = {
                title: "",
                content: "",
                city: "",
            }),
                // 消息提示
                this.$message({
                    type: "success",
                    message: "保存成功",
                });
            // 每次保存草稿就把id删除
            this.id = "";
        },
        //提交
        onSubmit() {
            console.log(this.form);
            if (this.timer) {
                return;
            }

            // 获取token
            const token = this.$store.state.user.userInfo.token;
            // 如果没有 token  证明用户还没有登录,直接跳转到登录页
            if (!token) {
                this.$message({
                    message: "请先登录",
                    type: "error",
                });
                this.$router.push({
                    path: "/user/login",
                });
                return;
            }
            // 如果输入框为空，则不发送请求
            if (this.form.title === "" || this.form.city === "") {
                if (this.msgBox) {
                    this.msgBox.close();
                }
                this.msgBox = this.$message({
                    type: "warning",
                    message: "请填写完整",
                });
                return;
            }
            // console.log(this.$store.state.user.userInfo.token);
            this.$axios({
                method: "post",
                url: "/posts",
                data: this.form,
                headers: {
                    Authorization: "Bearer " + token,
                },
            }).then((res) => {
                console.log(res.data);
                if (this.msgBox) {
                    this.msgBox.close();
                }
                this.$message.success("新增成功");
                this.$router.push({
                    path: "/post",
                });
            });

            this.timer = setTimeout(() => {
                this.timer = null;
            }, 1000);
        },
        queryDestSearch(queryString, showList) {
            this.loadCityList(queryString, showList);
        },
        //获取城市
        loadCityList(queryString, showList) {
            if (!queryString) {
                showList([
                    {
                        value: "请输入关键字",
                    },
                ]);
                return;
            }

            // 远程服务器获取城市列表
            this.$axios({
                url: "/airs/city",
                params: {
                    name: queryString,
                },
            }).then((res) => {
                console.log(res);
                // 数据结果缺少了 value 需要自己补上
                const data = res.data.data.map((city) => {
                    return {
                        ...city,
                        value: city.name,
                    };
                });
                showList(data);
            });
        },
    },
};
</script>

<style lang="less" scoped>
.maxbox {
    background-color: #72d4c8;
    min-height: 100vh;
    max-width: 100vw;
    background: url("../../static/bg.png") center bottom no-repeat;
    background-size: 100%;
    .content {
        margin: 0 auto;
        width: 1000px;
        display: flex;
        justify-content: space-between;
        // background-image: linear-gradient(
        //     45deg,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     red,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     yellow,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     red,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff,
        //     #ffffff
        // );
        padding: 5px;
        .forms {
            margin-top: 15px;
            .select {
                display: flex;
                p {
                    margin-right: 20px;
                }
            }
            width: 750px;
            h2 {
                font-weight: 400;
                font-size: 22px;
                margin-bottom: 10px;
            }
            p {
                font-size: 12px;
                color: #999;
                margin-bottom: 10px;
            }
            a {
                color: #f8a552;
            }
        }
        .aside {
            margin-top: 22px;
            width: 200px;
            .draft-box {
                border: 1px solid #ddd;
                padding: 10px;
            }
            .draft-title {
                margin-bottom: 10px;
                font-weight: 400;
                color: #666;
            }
            .draft-list {
                .draft-item {
                    .chers {
                        display: flex;
                        p {
                            width: 120;
                            flex: 1;
                        }
                        i {
                            padding: 0 5px;
                            cursor: pointer;
                            &:hover {
                                color: orange;
                                text-decoration: underline;
                            }
                        }
                    }
                    border: 1px solid #eeeeee;
                    font-size: 14px;
                    margin-bottom: 5px;
                    .draft-post-title {
                        cursor: pointer;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;

                        span {
                            margin-left: 5px;
                        }
                    }
                    p {
                        color: #999;
                    }
                }
            }
        }
    }
}

/deep/ .ql-toolbar {
    line-height: 1;
}
</style>